<!--
  - Copyright (C) 2024
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，未经购买不得使用
  - 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
  - 一经发现盗用、分享等行为，将追究法律责任，后果自负
-->
<!-- 验证码图片弹框显示和输入组件 -->
<template>
	<view>
		<view :class="'cu-modal ' + graphCodeModal" @tap="hideModal"
			catchtouchmove="touchMove">
			<view class="cu-dialog bg-white " @tap.stop>
				<view class="cu-bar justify-end">
					<view class="content">{{$t('graph-code.graph-code.277d45')}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view>
					<view>
						<image v-if="graphCodeUrl" :src="graphCodeUrl" @click="refreshGraphCode" class="margin-bottom" style="height: 100px;"></image>
						<view v-else class="margin-bottom-sm text-center text-red">{{$t('graph-code.graph-code.s267pi')}}</view>
						<view class="margin-lr padding-sm solid">
							<input :placeholder="$t('graph-code.graph-code.sc36lh')" name="graphCode" v-model="graphCode"></input>
						</view>
					</view>
					<view class="padding-lr padding-bottom">
						<button class="cu-btn margin-top response lg bg-gradual-purple round " :disabled="!graphCodeUrl" @click="onSend">{{$t('graph-code.graph-code.ln6xb1')}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 图形验证码
	import __config from '@/config/env'; // 配置文件
	export default {
		name:"graph-code",
		props:{
			phone: {
				type: String
			}
		},
		data() {
			return {
				graphCodeUrl: '', //图形验证码请求地址
				graphCode: '', // 图形验证码
				graphCodeModal: '' // 用 'show' 或 '' 切换弹框显示和隐藏
			};
		},
		methods: {
			// 隐藏图形验证码弹框
			hideModal() {
				this.graphCodeModal  = ''
			},
			// 显示图形验证码弹框
			showModal() {
				this.refreshGraphCode();
				this.graphCodeModal  = 'show'
			},
			// 生成随机图形验证码
			refreshGraphCode(){
				if(this.phone){
					//实际只要randomStr参数,s参数是保证图片能实时刷新
					//#ifndef H5
					this.graphCodeUrl = `${__config.basePath}/code?randomStr=${this.phone}&s=${new Date().getTime()}`
					//#endif
					//#ifdef H5
					// h5直接用本身的域名地址
					this.graphCodeUrl = `${location.origin}/code?randomStr=${this.phone}&s=${new Date().getTime()}`
					//#endif
					this.graphCode = ''
				}
			},
			onSend(){
				if(!this.graphCode){
					uni.showToast({
						title: this.$t('graph-code.graph-code.sc36lh'),
						icon: 'none'
					})
					return;
				}
				this.$emit('onSend', this.graphCode)
			}
		}
	}
</script>

<style>

</style>